<template>
  <!-- 删除成本 -->
    <public-dialog
            width="40%"
            title="删除成本预算"
            confirm-button-title="确认"
            v-model:visible="visible"
            @on-confirm="onConfirm"
    >
        <template #default>
            <el-main
                    v-loading="isLoading"
                    element-loading-text="表单数据提交中..."
            >
                <el-form
                        :model="form"
                        label-width="120px"
                >
                    <el-form-item label="项目名称">
                        <el-input disabled :placeholder="form.projectName"></el-input>
                    </el-form-item>
                    <el-form-item label="营收类别">
                        <el-input disabled :placeholder="form.categoryName"></el-input>
                    </el-form-item>
                    <el-form-item label="总额">
                        <el-input disabled :placeholder="form.total"></el-input>
                    </el-form-item>
                    <el-form
                            ref="formRef"
                            :model="form"
                    >
                        <!--                        <div v-for="(item,index) in form.cash" :key="index">
                            <div class="d-flex m-l50">
                                <el-form-item label-width="70px"  :prop="'cash.'+index+'.year'" :rules="rules.year">
                                    <el-date-picker
                                            v-model="item.year"
                                            value-format="YYYY"
                                            type="year"
                                            placeholder="请选择"
                                            size="large"
                                    />
                                </el-form-item>
                                <el-form-item class="m-l10"   :prop="'cash.'+index+'.amount'" :rules="rules.amount">
                                    <el-input
                                            v-model="item.amount"
                                            clearable
                                            placeholder="请输入金额"
                                            @input="item.amount = limitInputNum(item.amount,6,0,false)"
                                    ></el-input>
                                </el-form-item>
                                <el-form-item class="m-l10" v-if="index!==0">
                                    <el-button
                                            color="red"
                                            @click="deleteAmount(index)"
                                    >删除</el-button>
                                </el-form-item>
                            </div>
                        </div>-->
                        <public-table
                                ref="publicTableRef"
                                index
                                selection
                                :is-paging="false"
                                :indexWidth="'100'"
                                :page="page"
                                border
                                :header-cell-style="{'background':'#f7f7fa'}"
                                row-key="categoryId"
                                :tableData="form.cash"
                                :tableOption.sync="tableOption"
                                @handleSelectionChange="handleSelectionChange"
                        />
                    </el-form>
                </el-form>
            </el-main>
        </template>
    </public-dialog>
</template>

<script setup>
import PublicDialog from "@/components/PublicDialog.vue";
import {reactive, ref} from "vue";
import {ElDatePicker, ElForm, ElFormItem, ElMain, ElMessage} from "element-plus";
import {limitInputNum} from "@/common/utils/GlobalUtils";
import {costEstimationApi, investmentProjects} from "@/api/investment";
import PublicTable from "@/components/PublicTable.vue";

const visible = ref(false);
const form = reactive({
    projectName:'',
    parentCategoryName:'',
    categoryName:'',
    total:'',
    categoryId:'',
    cash:[]
});

const tableOption = ref([
    { label: "年", prop: "year"},
    { label: "金额", prop: "amount"},
]);

const rules = reactive({
    year:[
        { required: true, message: '请选择年份', trigger: 'change' },
    ],
    amount:[
        { required: true, message: '请输入金额', trigger: 'blur' },
    ]
});

const page = reactive({
    total: 0,
    current: 1,
    size: 10,
});

/**
 * 新增金额
 */
const addAmount = () => {
    form.cash.push({
        year:'',
        amount:''
    });
}

/**
 * 删除金额
 */
const deleteAmount = (index) => {
    form.cash.splice(index,1);
}

/**
 * 表格被勾选
 * @param e
 */
const costList = ref([]);
const handleSelectionChange = (e) => {
    costList.value = e;
}

/**
 * 弹窗确认事件
 */
const formRef = ref(null);
const isLoading = ref(false);
const emits = defineEmits(['onSuccess']);
const onConfirm = () => {
    if(costList.value.length===0){
        ElMessage.warning('请选择需要删除的成本测试数据!');
        return;
    }
    isLoading.value  =true;
    let params = {
        categoryId:form.categoryId,
        year:costList.value.map(item=>{return item.year})
    };
    costEstimationApi.delProjectInvestmentCost(params).then(res=>{
        if(res.code === '200'){
            isLoading.value  = false;
            visible.value = false;
            emits('onSuccess');
            ElMessage.success('删除成功!');
        }else{
            isLoading.value  = false;
            visible.value = false;
            ElMessage.error('删除失败!');
        }
    });
}

/**
 * 初始化数据
 * @param form form
 * @param data row
 * @private
 */
const _initData = (form,data) => {
    for (let key in data) {
        if(key==='cash'){
            data.cash.forEach(item=>{
                item.year = item.year.toString();
                item.amount = item.amount.toString();
            });
        }
        form[key] = data[key];
    }
}

/**
 * 打开弹窗
 */
const open = (row) => {
    _initData(form,row);
    visible.value = true;
    console.log('form',form);
    // 这句话放在这里执行会导致 对象数组属性里面的值为上一次的值
    /* nextTick(()=>{
       formRef.value.resetFields();
     });*/
}

/**
 * 关闭弹窗
 */
const close = () => {
    visible.value = false;
}

defineExpose({
    open,
    close
});
</script>

<style lang="scss" scoped>

</style>